<#assign base=request.contextPath />
<!DOCTYPE html>

<html>
<head>

<!-- bootstrap css-->
<link href="${base}/web/listbox/css/bootstrap.min.css"  rel="stylesheet" media="screen">

<!-- bootstrap table css -->
<link rel="stylesheet" href="${base}/web/table/bootstrap-table.min.css" />


<!-- 设置该iframe中的背景色 与父页面一致-->
<style type="text/css" >
body { background:#f5f5f5  }
</style>
</head>
<body >
   
    
<div class="container">
   			 <div class="input-group">
              <div class="input-group-btn">
                  <button type="button" class="role btn btn-default 
                     dropdown-toggle" data-toggle="dropdown">
                			     角色 
                     <span class="caret"></span>
                  </button> 
                  <ul class="dropdown-menu" style="min-width:34px">
                     <li><a id="doctor" class="selectrole">医生</a></li>
                     <li><a id="user" class="selectrole">患者</a></li>
                     <li><a class="selectrole" id="assitant">助手</a></li>
                     <li><a id="pharmacist" class="selectrole">药师</a></li>
                  </ul>
               </div><!-- /btn-group --> 
               <input id="keywords" type="text" class="form-control" placeholder="名字或手机号">
				<span class="input-group-btn ">
                  <button  class="search btn btn-default " type="button">
                     <i class="glyphicon glyphicon-search "></i>
                  </button>
               </span>
            </div><!-- /input-group -->
			<hr/>
 			<table id="selectrole"
 			data-click-to-select=true>
      
            
            </table>
 
 	        
</div>


<!-- jQuery.js -->
<script src="${base}/web/vendors/jquery-1.9.1.min.js"></script>
<!-- bootstrap js -->
<script src="${base}/web/listbox/js/bootstrap.min.js"></script>

<script src="${base}/web/listbox/js/column.js"></script>


<!-- bootstrap table js-->
<script src="${base}/web/table/bootstrap-table.min.js"></script>

<script>

	var $table=$("#selectrole")
	
	var role='';
	
	
	$(".selectrole").on("click",function(){
			role=$(this).attr("id");
			$(".role").html($(this).html());

			if(role == 'user')
			$table.bootstrapTable("refreshOptions",{
				columns:user,
				});
			else 
				$table.bootstrapTable("refreshOptions",{
				columns:doctor,
				});
			$table.bootstrapTable("removeAll");
		
			
			
		
		});

	$(".search").on("click",function(){
			if(role=='') return;
			if(jQuery.trim($("#keywords").val()) =='') return;
			var url = "data/"+role+"/"+$("#keywords").val();
			$table.bootstrapTable("refresh",{
				url:url
				
				});
			
		});


	$table.bootstrapTable({
		pageList:[10],
		sidePagination:'server',
    	pagination:true,
		columns : doctor
	
	});
	

	
	
	
	function getselected() {
			var results=$table.bootstrapTable('getSelections');
			return results.length!=0?results[0]:0;
	}
	

</script>
</body>
</html>